<template>
  <div id="message">
    <el-row>
      <el-button :plain="true" @click="open">打开消息提示</el-button>
      <el-button :plain="true" @click="openVn">VNode</el-button>
    </el-row>
    <hr>
    <el-row>
      <el-button :plain="true" @click="open2">成功</el-button>
      <el-button :plain="true" @click="open3">警告</el-button>
      <el-button :plain="true" @click="open">消息</el-button>
      <el-button :plain="true" @click="open4">错误</el-button>
    </el-row>
    <hr>
    <el-row>
      <el-button :plain="true" @click="openHTML">使用HTML片段</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    open () {
      this.$message('这是一条消息提示')
    },
    open2 () {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success',
        center: true
      })
    },
    open3 () {
      this.$message({
        showClose: true,
        message: '警告，这是一条警告消息',
        type: 'warning'
      })
    },
    open4 () {
      this.$message.error('这是一条错误消息')
    },
    openVn () {
      const h = this.$createElement
      this.$message({
        message: h('p', null, [
          h('span', null, '内容可以是'),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    },
    openHTML () {
      this.$message({
        dangerouslyUseHTMLString: true,
        message: '<strong>这是 <i>HTML</i> 片段</strong>'
      })
    }
  }
}
</script>
